<!-- 友伴官的一项 -->
<template>
	<view class="list-item" @click="handleGo">
		<image class="image" :src="pageData.coverUrl" mode="aspectFill"></image>

		<!-- 标签 -->
		<view class="tip">{{pageData.tag}}</view>

		<!-- 其他数据 -->
		<view class="content">

			<view class="top">
				<text class="top-name">{{pageData.stageName}}</text>

				<!-- 服务时间 -->
				<image v-if="pageData.serviceStatus !== 1 && pageData.isInInterval" class="top-timeImg"
					src="/static/images/fastNew.png">
				</image>
				<view v-else :class="{
					'top-time':true,
					'top-time1': pageData.serviceStatus !== 1 && !pageData.isInInterval,
					'top-time2': pageData.serviceStatus === 1
				}">
					{{pageData.serviceStatus === 1 ?'休息中' : `最早可约${startTime}`}}
				</view>

			</view>

			<view class="bottom">
				<view class="bottom-left">
					<view class="bottom-item bottom-age">{{pageData.age}}岁</view>
					<view class="bottom-item bottom-height">{{pageData.height}}cm</view>
					<view class="bottom-item bottom-weight">{{pageData.weight}}kg</view>
				</view>

				<view class="bottom-right" v-if="pageData.distance">
					<uni-icons type="location" size="20rpx" color="#fff"></uni-icons>
					<text>{{pageData.distance}}km</text>
				</view>
			</view>

		</view>

		<!-- 遮罩 -->
		<view class="overlay" v-if="pageData.serviceStatus === 1"></view>


	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				pageData: {}, // 页面数据
			};
		},
		computed:{
			/**
			 * 时间显示
			 */
			startTime() {
				let item = this.pageData.serviceStartTime
				let str = ''
				if (item !== '') {
					str = item.slice(0, item.length - 3)
				}
				return str
			},
		},
		
		
		watch: {
			data: {
				handler() {
					if (Object.keys(this.data).length > 0) {
						this.pageData = {
							...this.data
						}
					}
				},
				deep: true,
				immediate: true
			}
		},

		methods:{
			/**
			 * 跳转到详情页面
			 */
			handleGo() {
				// id和是否是服务时间内
				uni.navigateTo({
					url: `/pages/artist/info?id=${this.pageData.id}&isInInterval=${this.pageData.isInInterval ? '1':'0'}`
			
				})
			
			},
		}
	}
</script>

<style lang="less" scoped>
	.list-item {
		#box(100%, 100%);

		position: relative;

		.image {
			#box(100%, 100%);
			#position(absolute, 0, 0);
			z-index: 0;
		}

		.tip {
			#position(absolute, 0, 0);
			#font(18rpx, #fff);
			#box(64rpx, 36rpx, 18rpx 0 18rpx 0, linear-gradient(159deg, #E27C8A 0%, #F28866 100%));
			#flex(-, center, center);
			z-index: 2;
		}

		.content {
			position: absolute;
			left: 0;
			bottom: 0;
			#box(100%, -, -, linear-gradient(180deg, rgba(#000, 0), rgba(#000, .7)));
			#padding(36rpx 12rpx 18rpx 12rpx);

			.top {
				#flex(-, -, center);
				gap: 8rpx;

				.top-name {
					#font(28rpx, #fff, bold);
				}

				
				.top-timeImg{
					#box(96rpx,26rpx,13rpx);
				}
				.top-time {
					#font(16rpx, #26605c);
					#padding(6rpx 14rpx);
					border-radius: 100rpx;

				}

				.top-time1 {
					background: linear-gradient(90deg, #75BE9D 0%, rgba(204, 255, 232, 0.5) 100%, rgba(255, 255, 255, 0.5) 100%);
				}

				.top-time2 {
					color: #333;
					background: #fff;
				}

			}

			.bottom {
				position: relative;
				z-index: 2;
				#flex(-, space-between, center);



				.bottom-left {
					#flex(-, -, center);
					margin-top: 12rpx;
					gap: 6rpx;

					.bottom-item {
						#padding(6rpx 14rpx);
						#font(16rpx, #fdf3f3);
						border-radius: 100rpx;
					}

					.bottom-age {
						background-color: #E87884;
					}

					.bottom-height {
						background-color: #F7A254;
					}

					.bottom-weight {
						background-color: #8D82EE;
					}
				}

				.bottom-right {
					#font(16rpx, #fff);
				}



			}


		}



		.overlay {
			#position(relative, 0, 0);
			#box(100%, 100%, -, rgba(#fff, .5));
			z-index: 1;
		}


	}
</style>